<template>
  <div class="shop">
    <van-nav-bar
        title="商品订单"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-tabs v-model="active">
      <van-tab title="全部" class="sign">
        <van-card v-for="(item,i) in userOrder"
                  :key="i+'-order'"
                  :price="`${item.sum}万`"
                  desc="描述信息"
                  :title="item.title"
                  :thumb="`/img/${item.img}`"
        >
          <template #tags>
            <van-tag plain type="warning" class="tag">{{ item.style === 1 ? "老房" : "新房" }}</van-tag>
            <van-tag plain type="warning" class="tag">{{ item.area }}㎡</van-tag>
            <van-tag plain type="warning" class="tag">{{ item.value }}</van-tag>
          </template>
          <template #footer>
            <van-button size="small" type="info" @click="toDecoration(item.orderId)">查看详情</van-button>
            <van-button size="small" type="info" @click="toList(item.id)">价格明细</van-button>
            <van-button size="small" type="info" @click="sign(item.id)">&nbsp&nbsp待签约&nbsp&nbsp</van-button>
          </template>
        </van-card>
        <van-card v-for="(item,i) in userOrder1"
                  :key="i+'-order1'"
                  :price="`${item.sum}万`"
                  desc="描述信息"
                  :title="item.title"
                  :thumb="`/img/${item.img}`"
        >
          <template #tags>
            <van-tag plain type="warning" class="tag">{{ item.style === 1 ? "老房" : "新房" }}</van-tag>
            <van-tag plain type="warning" class="tag">{{ item.area }}㎡</van-tag>
            <van-tag plain type="warning" class="tag">{{ item.value }}</van-tag>
          </template>
          <template #footer>
            <van-button size="small" type="info" @click="toDecoration(item.orderId)">查看详情</van-button>
            <van-button size="small" type="info" @click="toList(item.id)">价格明细</van-button>
            <van-button size="small" type="info" @click="pay(item.id)">&nbsp&nbsp请付款&nbsp&nbsp</van-button>
          </template>
        </van-card>
        <van-card v-for="(item,i) in userOrder2"
                  :key="i+'-order2'"
                  :price="`${item.sum}万`"
                  desc="描述信息"
                  :title="item.title"
                  :thumb="`/img/${item.img}`"
        >
          <template #tags>
            <van-tag type="warning" class="tag">{{ item.style === 1 ? "老房" : "新房" }}</van-tag>
            <van-tag type="warning" class="tag">{{ item.area }}㎡</van-tag>
            <van-tag type="warning" class="tag">{{ item.value }}</van-tag>
          </template>
          <template #footer>
            <van-button size="small" type="info" @click="toDecoration(item.orderId)">查看详情</van-button>
            <van-button size="small" type="info" @click="toList(item.id)">价格明细</van-button>
            <van-button size="small" type="info" >&nbsp&nbsp评价&nbsp&nbsp</van-button>
          </template>
        </van-card>
      </van-tab>
      <van-tab title="签约" class="sign">
        <van-card v-for="(item,i) in userOrder"
                  :key="i"
                  :price="`${item.sum}万`"
                  desc="描述信息"
                  :title="item.title"
                  :thumb="`/img/${item.img}`"
        >
          <template #tags>
            <van-tag plain type="warning" class="tag">{{ item.style === 1 ? "老房" : "新房" }}</van-tag>
            <van-tag plain type="warning" class="tag">{{ item.area }}㎡</van-tag>
            <van-tag plain type="warning" class="tag">{{ item.value }}</van-tag>
          </template>
          <template #footer>
            <van-button size="small" type="info" @click="toDecoration(item.orderId)">查看详情</van-button>
            <van-button size="small" type="info" @click="toList(item.id)">价格明细</van-button>
            <van-button size="small" type="info" @click="sign(item.id)">&nbsp&nbsp待签约&nbsp&nbsp</van-button>
          </template>
        </van-card>
      </van-tab>
      <van-tab title="待付款" class="sign">
        <van-card v-for="(item,i) in userOrder1"
                  :key="i"
                  :price="`${item.sum}万`"
                  desc="描述信息"
                  :title="item.title"
                  :thumb="`/img/${item.img}`"
        >
          <template #tags>
            <van-tag plain type="warning" class="tag">{{ item.style === 1 ? "老房" : "新房" }}</van-tag>
            <van-tag plain type="warning" class="tag">{{ item.area }}㎡</van-tag>
            <van-tag plain type="warning" class="tag">{{ item.value }}</van-tag>
          </template>
          <template #footer>
            <van-button size="small" type="info" @click="toDecoration(item.orderId)">查看详情</van-button>
            <van-button size="small" type="info" @click="toList(item.id)">价格明细</van-button>
            <van-button size="small" type="info" @click="pay(item.id)">&nbsp&nbsp请付款&nbsp&nbsp</van-button>
          </template>
        </van-card>
      </van-tab>
      <van-tab title="已完成" class="sign">
        <van-card v-for="(item,i) in userOrder2"
                  :key="i"
                  :price="`${item.sum}万`"
                  desc="描述信息"
                  :title="item.title"
                  :thumb="`/img/${item.img}`"
        >
          <template #tags>
            <van-tag type="warning" class="tag">{{ item.style === 1 ? "老房" : "新房" }}</van-tag>
            <van-tag type="warning" class="tag">{{ item.area }}㎡</van-tag>
            <van-tag type="warning" class="tag">{{ item.value }}</van-tag>
          </template>
          <template #footer>
            <van-button size="small" type="info" @click="toDecoration(item.orderId)">查看详情</van-button>
            <van-button size="small" type="info" @click="toList(item.id)">价格明细</van-button>
            <van-button size="small" type="info" @click="toComment(item.id)">&nbsp&nbsp评价&nbsp&nbsp</van-button>
          </template>
        </van-card>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {mapState} from "vuex"
import {post} from "../assets/js/config/api"
import {order} from "../assets/js/config/common";
import {Dialog} from 'vant';


export default {
  name: "Shop",
  data() {
    return {
      active: '',
      user: {},
      id: {},
      userOrder: {},
      userOrder1: {},
      userOrder2: {},
    }
  },
  computed: {
    ...mapState(["uid"]),
  },
  mounted() {
    this.active = Number(this.$route.params.i);
    this.user.user = this.uid
    order(this.user).then(result => {
      this.userOrder = result[0].result;
      this.userOrder1 = result[1].result;
      this.userOrder2 = result[2].result;
    })
  },
  methods: {
    onClickLeft() {
      this.$router.push('/user')
    },
    //签约
    sign(id) {
      this.user.id = id
      Dialog.confirm({
        title: '签约',
        message: '确定要签约吗',
      }).then(() => {
            post('/sign', this.user).then(() => {
              order(this.user).then(result => {
                this.userOrder = result[0].result;
                this.userOrder1 = result[1].result;
                this.userOrder2 = result[2].result;
              })
            }).catch(err=>{console.log(err)})
          })
    },
    //付款
    pay(id) {
      this.user.id = id
      Dialog.confirm({
        title: '付款',
        message: '确定要付款吗',
      }).then(() => {
            post('/pay', this.user).then(()=>{
              order(this.user).then(result => {
                this.userOrder = result[0].result;
                this.userOrder1 = result[1].result;
                this.userOrder2 = result[2].result;
              })
            })
      }).catch(err => {console.log(err)})
    },
    //价格明细
    toList(id){
      this.$router.push({
      path:`/pricelist/${id}`
      })
    },
    //商品详情
    toDecoration(id) {
      this.$router.push({
        path: `/details/${id}`
      })
    },
    //评价
    toComment(id){
      this.$router.push({
        path:`/comment/${id}`
      })
    }
  },
}

</script>

<style scoped lang="scss">
@import "../../public/sass/shop";
</style>
